<template>
	<view>
		<view class="container">
			<view class="viewBox" v-for="item in videoList" @click=toVideo(item.videoId)>
				<view class="video">
					<img :src="item.videoCover">
					<p class="title">{{item.title}}</p>
					<p class="type">{{item.type}}</p>
					<p class="views">{{item.views}}</p>
					<p class="time">{{item.time}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:['videoList'],
		methods:{
			toVideo(id){
				uni.navigateTo({
					url:`../video/index?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		margin-top:10px;
		display:flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		>.viewBox{
			width:50%;
			display:flex;
			>.video{
				position:relative;
				margin:10px auto 10px;
				width:180px;
				height:150px;
				background-color: white;
				border-radius:5px;
				>img{
					width:100%;
					height:100px;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
				}
				>.title{
					width: 90%;
					margin-left:5%;
					font-size:15px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				>.type{
					position:absolute;
					bottom:3px;
					width:90%;
					margin-left:5%;
					font-size:10px;
					color:#C0C0C0;
				}
				>.views{
					position: absolute;
					font-size:10px;
					color:white;
					top:80px;
					left:5px;
				}
				>.time{
					position:absolute;
					font-size:10px;
					color:white;
					top:80px;
					right:5px;
				}
			}
		}
	}
	@media screen and (max-width:320px) {
		.container{
			>.viewBox{
				>.video{
					width:150px;
					height:150px;
				}
			}
		}
	}
	
</style>
